<template>
  <div>
    <Page>
      <div class="contBox h-full">
        <BaseForm>
          <template v-for="(item, index) in formDataList" :key="index">
            <FormItem
              class="ml-5 pl-20"
              :label="item.configName"
              :rules="[{ message: `请输入${item.configName}` }]"
            >
              <Input v-model:value="item.configVal" allowClear />
            </FormItem>
          </template>
          <FormItem>
            <Button
              class="submitBtn"
              type="primary"
              @click="formApi.submitForm()"
              >提交</Button
            >
          </FormItem>
        </BaseForm>
      </div>
    </Page>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { Page } from '@vben/common-ui';
import { useVbenForm } from '#/adapter/form';
import { formSchema } from './data/options';
import {
  queryGet,
  queryUpdate,
  queryCommonGet,
  queryCommonUpdate,
} from './data/api';
import { message, FormItem, Button, Input } from 'ant-design-vue';
import { useThrottleFn } from '@vueuse/core';

const formDataList = ref([
  {
    configName: 'configName',
    configVal: 'configVal',
  },
]);

// 抽屉提交
const onSubmit = useThrottleFn(async (values: Record<string, any>) => {
  console.log(values);
  const { valid } = await formApi.validate();
  if (!valid) return;
  console.log('values', values);
  let res: any = await queryUpdate({ ...values, companyId: 1 });
  let tres: any = await queryCommonUpdate({
    commonConfig: JSON.stringify(formDataList.value),
  });
  message.success(res.message);
}, 1000);

onMounted(() => {
  queryGet({ companyId: 1 }).then((res: any) => {
    formApi.setValues({ ...res.data });
  });
  queryCommonGet({ configType: 'common' }).then((res: any) => {
    formDataList.value = res.data;
  });
});

// 表单
const [BaseForm, formApi] = useVbenForm({
  showDefaultActions: false,
  wrapperClass: 'pl-20 pr-20 pt-10 pb-10',
  schema: formSchema,
  handleSubmit: onSubmit,
  commonConfig: {
    labelWidth: 160,
    componentProps: {
      class: 'w-full',
    },
  },
});
</script>

<style lang="scss" scoped>
.submitBtn {
  margin-left: 170px;
  padding: 0 25px;
  margin-top: 40px;
}

.contBox1 {
  padding: 100px !important;
}
</style>
